import {Button, Form, Input, Space, DatePicker, Row, Col} from "antd";
import _ from "lodash";
import './index.scss'
import moment from "moment";

const layout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18},
};

const {RangePicker} = DatePicker;

interface IProps {
  onQueryCallBack: (params: any) => any
}

const Query = (props: IProps) => {
  const [form] = Form.useForm();

  const onQuery = () => {
    form.validateFields().then((values) => {
      // 过滤对象空值
      const submitvalues = _.pickBy(values);
      if (values.alarmTime) {
        submitvalues.alarmTimeStart = moment(
          _.get(values, "alarmTime[0]", undefined)
        ).format("YYYY-MM-DD HH:mm:ss");
        submitvalues.alarmTimeEnd = moment(
          _.get(values, "alarmTime[1]", undefined)
        ).format("YYYY-MM-DD HH:mm:ss");
        delete submitvalues.alarmTime;
      }
      if (values.handleTime) {
        submitvalues.handleTimeStart = moment(
          _.get(values, "handleTime[0]", undefined)
        ).format("YYYY-MM-DD HH:mm:ss");
        submitvalues.handleTimeEnd = moment(
          _.get(values, "handleTime[1]", undefined)
        ).format("YYYY-MM-DD HH:mm:ss");
        delete submitvalues.handleTime;
      }
      props.onQueryCallBack(submitvalues)
    });
  }

  const reset = () => {
    form.resetFields()
  }

  return (
    <div className="queryContnet">
      <Form form={form} labelAlign="left" {...layout} layout="inline">
        <Row justify="start">
          <Col span={8}>
            <Form.Item name="deviceName" label="设备名称">
              <Input/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="alarmTime" label="警报时间">
              <RangePicker showTime/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="handleTime" label="处理时间">
              <RangePicker showTime/>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <div>
        <Space>
          <Button onClick={reset}>重置</Button>
          <Button type="primary" onClick={onQuery}>查询</Button>
        </Space>
      </div>
    </div>
  );
}

export default Query
